<template>
  <div class="md-editor">
    <!-- 分类选择（新增文档显示，编辑文档隐藏） -->
    <div class="category-selector" v-if="showCategory">
      <label>{{ $localePath === "/" ? "文档分类：" : "Document Category：" }}</label>
      <select v-model="form.category" class="form-select" required>
        <option value="tech">{{ $localePath === "/" ? "技术笔记" : "Tech Notes" }}</option>
        <option value="life">{{ $localePath === "/" ? "生活随笔" : "Life Essays" }}</option>
        <option value="other">{{ $localePath === "/" ? "其他" : "Other" }}</option>
      </select>
    </div>
    <!-- 文档标题 -->
    <input
      type="text"
      v-model="form.title"
      class="title-input"
      :placeholder="$localePath === '/' ? '请输入文档标题（必填）' : 'Enter document title (required)'"
      required
    />
    <!-- Markdown 编辑器（mavon-editor） -->
    <mavon-editor
      v-model="form.content"
      :toolbars="toolbars"
      :subfield="true"  
      :defaultOpen="'edit'" 
      :placeholder="$localePath === '/' ? '请输入 Markdown 内容（至少10个字符）' : 'Enter Markdown content (min 10 characters)'"
      class="editor-content"
    />
    <!-- 操作按钮 -->
    <div class="btn-group">
      <button type="button" class="btn save-btn" @click="handleSave" :disabled="loading">
        <i class="fa fa-spinner fa-spin" v-if="loading"></i>
        <span v-if="loading">{{ $localePath === "/" ? "保存中..." : "Saving..." }}</span>
        <span v-else>{{ $localePath === "/" ? "保存文档" : "Save Document" }}</span>
      </button>
      <button type="button" class="btn cancel-btn" @click="handleCancel">
        {{ $localePath === "/" ? "取消" : "Cancel" }}
      </button>
    </div>
  </div>
</template>

<script setup>
import { ref, getCurrentInstance, defineProps, defineEmits } from "vue";
import mavonEditor from "mavon-editor";
import "mavon-editor/dist/css/index.css";  // 引入编辑器样式

// 1. 定义 Props（接收父组件传递的文档数据，用于编辑模式）
const props = defineProps({
  doc: {  // 编辑模式时，传递已有的文档数据
    type: Object,
    default: () => null
  },
  showCategory: {  // 是否显示分类选择（新增：true，编辑：false）
    type: Boolean,
    default: true
  }
});

// 2. 定义 Emits（向父组件传递事件：保存成功/取消）
const emit = defineEmits(["saveSuccess", "cancel"]);

// 3. 获取全局实例（axios/toast）
const { proxy } = getCurrentInstance();

// 4. 表单数据（初始化：编辑模式回显，新增模式为空）
const form = ref({
  title: props.doc?.title || "",
  content: props.doc?.content || "",
  category: props.doc?.category || "tech"  // 默认分类：技术笔记
});

// 5. 编辑器工具栏配置（按需开启功能）
const toolbars = ref({
  bold: true,    // 加粗
  italic: true,  // 斜体
  header: true,  // 标题
  link: true,    // 链接
  image: true,   // 图片
  list: true,    // 列表
  table: true,   // 表格
  code: true,    // 代码块
  fullscreen: true,  // 全屏
  undo: true,    // 撤销
  redo: true     // 重做
});

// 6. 加载状态
const loading = ref(false);

// 7. 保存文档（新增：POST，编辑：PUT）
const handleSave = async () => {
  // 验证内容长度
  if (form.value.content.length < 10) {
    proxy.$toast.warning($localePath === "/" ? "内容至少10个字符" : "Content must be at least 10 characters");
    return;
  }

  loading.value = true;
  try {
    let res;
    if (props.doc) {
      // 编辑模式：调用后端更新接口（传递文档ID）
      res = await proxy.$axios.put(`/docs/${props.doc.id}`, form.value);
    } else {
      // 新增模式：调用后端创建接口
      res = await proxy.$axios.post("/docs", form.value);
    }

    if (res.code === 0) {
      proxy.$toast.success(res.msg || ($localePath === "/" ? "文档保存成功" : "Document saved successfully"));
      emit("saveSuccess");  // 通知父组件保存成功，刷新列表
    } else {
      proxy.$toast.error(res.msg || ($localePath === "/" ? "文档保存失败" : "Failed to save document"));
    }
  } catch (error) {
    // 网络错误由拦截器处理
  } finally {
    loading.value = false;
  }
};

// 8. 取消操作（通知父组件关闭弹窗）
const handleCancel = () => {
  emit("cancel");
};
</script>

<style scoped>
/* 编辑器容器 */
.md-editor {
  width: 100%;
  margin: 16px 0;
  background: #fff;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* 分类选择 */
.category-selector {
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.category-selector label {
  font-weight: 500;
  color: #333;
  font-size: 14px;
  width: 100px;
}

.form-select {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  min-width: 200px;
  font-size: 14px;
  cursor: pointer;
  transition: border 0.3s;
}

.form-select:focus {
  outline: none;
  border-color: #42b983;
}

/* 标题输入框 */
.title-input {
  width: 100%;
  padding: 12px 16px;
  margin-bottom: 16px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 18px;
  font-weight: 500;
  color: #333;
  transition: border 0.3s;
}

.title-input:focus {
  outline: none;
  border-color: #42b983;
  box-shadow: 0 0 0 2px rgba(66, 185, 131, 0.2);
}

/* 编辑器内容区 */
.editor-content {
  border: 1px solid #ddd !important;
  border-radius: 4px !important;
  min-height: 400px;
}

/* 按钮组 */
.btn-group {
  margin-top: 16px;
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

.btn {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.save-btn {
  background: #42b983;
  color: #fff;
}

.save-btn:disabled {
  background: #91e0b8;
  cursor: not-allowed;
}

.cancel-btn {
  background: #f5f5f5;
  color: #666;
}

.cancel-btn:hover {
  background: #eee;
}

/* 响应式适配 */
@media (max-width: 768px) {
  .category-selector {
    flex-direction: column;
    align-items: flex-start;
  }

  .form-select {
    width: 100%;
  }

  .btn-group {
    justify-content: center;
    flex-wrap: wrap;
  }
}
</style>